<template>
    <div class="assembly-disassembly-template">
      <!-- 顶部筛选区域 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="组合件">
          <el-input v-model="searchForm.component" placeholder="请输入组合件"></el-input>
        </el-form-item>
        <el-form-item label="子件">
          <el-input v-model="searchForm.subComponent" placeholder="请输入子件"></el-input>
        </el-form-item>
        <el-form-item label="模板类型">
          <el-select v-model="searchForm.templateType" placeholder="请选择模板类型">
            <el-option
              v-for="item in templateTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="searchForm.showUsedTemplate">显示禁用模板</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 操作按钮区域 -->
      <div class="action-buttons">
        <el-button type="primary" @click="handleCreate">新增</el-button>
        <el-button type="primary" @click="handleBatchOperate">批量操作</el-button>
        <el-upload class="upload-btn" action="/your-upload-url" :show-file-list="false">
          <el-button type="primary">导入</el-button>
        </el-upload>
        <el-button type="primary" @click="handleExport">导出</el-button>
        <el-button type="danger" @click="handleDelete">删除</el-button>
      </div>
  
      <!-- 模板表格 -->
      <el-table
        :data="templateTableData"
        border
        style="width: 100%; margin-top: 16px"
        @selection-change="handleTemplateSelectionChange" 
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="small"
              @click="handleEditTemplate(scope.row)"
            />
            <el-button
              type="text"
              icon="el-icon-more"
              size="small"
              @click="handleMoreTemplate(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="index" label="序号" width="70" />
        <el-table-column prop="templateCode" label="模板编号" />
        <el-table-column prop="templateName" label="模板名称" />
        <el-table-column prop="templateType" label="模板类型" />
        <el-table-column prop="component" label="组合件" />
        <el-table-column prop="product" label="商品" />
        <el-table-column prop="combinationQty" label="组合数量" />
        <el-table-column prop="combinationUnit" label="组合件单位" />
        <el-table-column prop="creator" label="制作人" />
        <el-table-column prop="createTime" label="制单时间" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 子件表格（可控制显示隐藏，示例默认显示） -->
      <div class="sub-table-wrapper" style="margin-top: 16px">
        <el-table :data="subTableData" border style="width: 100%">
          <el-table-column prop="seq" label="序号" width="70" />
          <el-table-column prop="subComponentName" label="子件名称" />
          <el-table-column prop="product" label="商品" />
          <el-table-column prop="productCode" label="商品编码" />
          <el-table-column prop="qty" label="数量" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="warehouse" label="仓库" />
          <el-table-column prop="currentStock" label="当前库存" />
          <el-table-column prop="remark" label="备注" />
        </el-table>
      </div>
  
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 16px"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import {
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElOption,
    ElCheckbox,
    ElButton,
    ElTable,
    ElTableColumn,
    ElSwitch,
    ElPagination,
    ElUpload,
    ElMessageBox,
    ElMessage
  } from 'element-plus'
  
  // 模拟模板类型选项
  const templateTypeOptions = ref([
    { label: '拆包模板', value: '拆包模板' },
    { label: '组装模板', value: '组装模板' }
  ])
  
  // 搜索表单
  const searchForm = ref({
    component: '',
    subComponent: '',
    templateType: '',
    showUsedTemplate: false
  })
  
  // 模板表格数据（模拟）
  const templateTableData = ref([
    {
      index: 1,
      templateCode: '',
      templateName: '巧克力礼盒',
      templateType: '拆包模板',
      component: '巧克力礼盒',
      product: 'SP0071 黑巧克力礼盒 20g*20块',
      combinationQty: 1,
      combinationUnit: '',
      creator: '体验用户1',
      createTime: '2023-05-18',
      remark: '',
      status: true
    },
    {
      index: 2,
      templateCode: '',
      templateName: '巧克力礼盒',
      templateType: '组装模板',
      component: '白巧克力礼盒',
      product: 'SP0006 白巧克力礼盒 60g*20块',
      combinationQty: 1,
      combinationUnit: '',
      creator: '体验用户1',
      createTime: '2023-05-17',
      remark: '来源于销售工作流KOC0203051...',
      status: true
    },
    {
      index: 3,
      templateCode: '',
      templateName: '冰淇淋云礼盒',
      templateType: '组装模板',
      component: '冰淇淋云',
      product: 'H03.02.013.001 冰淇淋云礼盒 150G',
      combinationQty: 136,
      combinationUnit: '',
      creator: '体验用户1',
      createTime: '2022-12-12',
      remark: '',
      status: true
    }
  ])
  
  // 子件表格数据（模拟）
  const subTableData = ref([
    {
      seq: 1,
      subComponentName: '子件1',
      product: '商品A',
      productCode: 'SP001',
      qty: 2,
      unit: '个',
      warehouse: '主仓',
      currentStock: 100,
      remark: ''
    },
    {
      seq: 2,
      subComponentName: '子件2',
      product: '商品B',
      productCode: 'SP002',
      qty: 3,
      unit: '盒',
      warehouse: '副仓',
      currentStock: 50,
      remark: ''
    }
  ])
  
  const total = ref(templateTableData.value.length)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const selectedTemplateRows = ref([])
  
  onMounted(() => {
    // 模拟从接口获取数据，实际项目替换为真实请求
    // const res = await api.getTemplateList()
    // templateTableData.value = res.data
  })
  
  // 查询
  const handleSearch = () => {
    console.log('搜索条件：', searchForm.value)
    // 实际调用接口，根据 searchForm 过滤数据
    // const res = await api.getTemplateList(searchForm.value)
    // templateTableData.value = res.data
  }
  
  // 新增
  const handleCreate = () => {
    ElMessageBox.prompt('请输入模板名称', '新增模板', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })
    .then(({ value }) => {
      const newRow = {
        index: templateTableData.value.length + 1,
        templateName: value,
        // 其他默认字段...
        status: true
      }
      templateTableData.value.unshift(newRow)
      ElMessage.success('新增成功')
    })
    .catch(() => {
      ElMessage.info('取消新增')
    })
  }
  
  // 批量操作
  const handleBatchOperate = () => {
    if (selectedTemplateRows.value.length === 0) {
      ElMessage.warning('请选择要操作的模板行')
      return
    }
    console.log('批量操作的模板行：', selectedTemplateRows.value)
    // 调用批量操作接口逻辑...
  }
  
  // 导出
  const handleExport = () => {
    // 调用导出接口，示例仅提示
    ElMessage.info('执行导出操作，可结合后端实现 Excel 导出')
  }
  
  // 删除
  const handleDelete = () => {
    if (selectedTemplateRows.value.length === 0) {
      ElMessage.warning('请选择要删除的模板行')
      return
    }
    ElMessageBox.confirm(
      '此操作将永久删除选中模板，是否继续？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    .then(() => {
      // 过滤掉选中的行，模拟删除
      templateTableData.value = templateTableData.value.filter(
        item => !selectedTemplateRows.value.includes(item)
      )
      selectedTemplateRows.value = []
      ElMessage.success('删除成功')
    })
    .catch(() => {
      ElMessage.info('取消删除')
    })
  }
  
  // 模板行选中变化
  const handleTemplateSelectionChange = (val) => {
    selectedTemplateRows.value = val
  }
  
  // 状态改变
  const handleStatusChange = (row) => {
    console.log('模板状态改变：', row)
    // 调用状态更新接口逻辑...
  }
  
  // 编辑模板
  const handleEditTemplate = (row) => {
    console.log('编辑模板行：', row)
    // 打开编辑弹窗等逻辑，可结合 ElDialog 实现
  }
  
  // 更多操作
  const handleMoreTemplate = (row) => {
    console.log('更多操作模板行：', row)
    // 弹出更多操作菜单等逻辑
  }
  
  // 分页改变
  const handleSizeChange = (val) => {
    pageSize.value = val
    // 调用接口获取对应页数据...
  }
  const handleCurrentChange = (val) => {
    currentPage.value = val
    // 调用接口获取对应页数据...
  }
  </script>
  
  <style scoped>
  .assembly-disassembly-template {
    padding: 20px;
    background-color: #fff;
    height: 800px;
  }
  .search-form {
    margin-bottom: 16px;
  }
  .action-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }
  .sub-table-wrapper {
    margin-top: 16px;
  }
  </style>